<template>
    <el-dialog v-if="dialogVisible" :append-to-body="true" :close-on-click-modal='false' title="添加预警规则" :visible.sync="dialogVisible" top="5vh" @close="resetForm('addRuleGroupForm')" width="1200px">
        <el-form size="small" :model="addRuleGroupForm" :hide-required-asterisk='true' ref="addRuleGroupForm" :rules="addRuleGroupRules">
            <div class="flexbox">
                <div class="rules_title">规则设置</div>
                <div class="rule_box flex">
                    <div class="flexbox flexcenter" style="margin-bottom:10px">
                        <div class="rule_titles">设置固定条件 <span class="tips_text">（每5分钟检查一次，会自动触发关停操作。【托管计划】和【稳成本投放计划】程序无法干涉开启关停）</span></div>
                    </div>
                    <template v-for="(item,index) in addRuleGroupForm.isSelect">
                        <template v-if="item.value!=5">
                            <template v-if="item.value==6||item.value==8">
                                <div class="cod_item flexbox flexcenter flexbetween" :key="index">
                                    <div class="flexbox flexcenter">
                                        <el-form-item :label="item.start_text" :prop="`isSelect.${index}.num`" :rules="addRuleGroupRules.group" style="margin-bottom:0">
                                            <el-input v-model="item.num" placeholder="请输入" style="width:120px"></el-input>
                                        </el-form-item>
                                        <el-form-item :label="item.start_text2" :prop="`isSelect.${index}.num2`" :rules="addRuleGroupRules.group" style="margin-bottom:0;margin-left:20px">
                                            <el-input v-model="item.num2" placeholder="请输入" style="width:120px"></el-input>
                                        </el-form-item>
                                    </div>
                                    <div class="icon_btn ml_12"><img src="../../assets/img/del_icon2.svg" alt="" @click="deletCondition(item.value)"></div>
                                </div>
                            </template>
                            <template v-else>
                                <div class="cod_item flexbox flexcenter flexbetween" :key="index">
                                    <el-form-item :label="item.title" :prop="`isSelect.${index}.num`" :rules="addRuleGroupRules.group" style="margin-bottom:0">
                                        <el-input v-model="item.num" placeholder="请输入" style="width:120px">
                                            <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px" v-if="item.value==3">￥</i>
                                        </el-input>
                                    </el-form-item>
                                    <div class="icon_btn ml_12"><img src="../../assets/img/del_icon2.svg" alt="" @click="deletCondition(item.value)"></div>
                                </div>
                            </template>
                        </template>

                        <template v-else>
                            <div class="rule_titles" style="margin-top:12px">预警通知条件 <span class="tips_text">（满足设定条件将触发预警通知）</span></div>
                            <div class="cod_item flexbox flexcenter flexbetween" :key="index">
                                <el-form-item :label="item.title" :prop="`isSelect.${index}.num`" :rules="addRuleGroupRules.group" style="margin-bottom:0">
                                    <el-input v-model="item.num" placeholder="请输入" style="width:120px">
                                        <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                                    </el-input>
                                </el-form-item>
                                <div class="icon_btn ml_12"><img src="../../assets/img/del_icon2.svg" alt="" @click="deletCondition(item.value)"></div>
                            </div>
                        </template>
                        <!-- <div class="cod_item flexbox flexcenter flexbetween">
                            <div class="flexbox flexcenter">
                                <el-form-item label="title" prop="num" :rules="addRuleGroupRules.group" style="margin-bottom:0">
                                    <el-input v-model="item.num" placeholder="请输入" style="width:120px"></el-input>
                                </el-form-item>
                                <el-form-item label="title" prop="num" :rules="addRuleGroupRules.group" style="margin-bottom:0;margin-left:16px">
                                    <el-input v-model="item.num" placeholder="请输入" style="width:120px"></el-input>
                                </el-form-item>
                            </div>
                            <div class="icon_btn ml_12"><img src="../../assets/img/del_icon2.svg" alt="" @click="deletCondition(item.value)"></div>
                        </div> -->
                    </template>

                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom-start'>
                        <div class="flexbox flexcenter drop_box">
                            <span>添加条件</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-checkbox-group v-model="editor_uid" class="check_style adver_drop" @change="selectCondition">
                                <el-checkbox :label="item.value" v-for="item in condition" :key='item.value'>
                                    <span class="el_check_title">{{item.title}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="divider_line"></div>
                    <div class="rule_titles" style="margin-bottom:10px">触发操作</div>
                    <div class="condition_box">
                        <div class="condition_item flexbox flexcenter">
                            关停计划
                        </div>
                        <div class="condition_item flexbox flexcenter noBline">
                            <div class="cod_text font_14 color_01">
                                <template v-for="item in addRuleGroupForm.isSelect">
                                    <template v-if="item.value!=5">
                                        <template v-if="item.value==6||item.value==8">
                                            <p :key="item.value" >满足{{item.start_text}}<span class="blue_tips">{{item.num}}</span> 或 满足{{item.start_text2}}<span class="blue_tips">{{item.num2}}</span>, 则触发<span class="blue_tips">关停计划</span>操作</p>
                                        </template>
                                        <p :key="item.value" v-else>满足{{item.start_text}}<span class="blue_tips">{{item.num}}</span>, 则触发<span class="blue_tips">关停计划</span>操作</p>
                                    </template>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="condition_box" v-if="isShowPlan(addRuleGroupForm.isSelect)">
                        <div class="condition_item flexbox flexcenter">
                            预警通知
                        </div>
                        <div class="condition_item flexbox flexcenter noBline">
                            <div class="cod_tag">触发条件</div>
                            <div class="cod_text font_14 color_01 ml_12">
                                <template v-for="item in addRuleGroupForm.isSelect">
                                    <p :key="item.value" v-if="item.value==5">满足{{item.start_text}}<span class="blue_tips">￥{{item.num}}</span>, 则触发<span class="blue_tips">预警通知</span>操作</p>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm('addRuleGroupForm')" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm('addRuleGroupForm')" class="el-button-width">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        var maxValue = (rule, value, callback) => {
            if (Number(value) > 900000) {
                callback(new Error("数值不能超过900000"));
            }
            callback();
        };
        return {
            editor_uid: [1],
            condition: [
                {
                    title: "直播间下单/直播间成交出价最大值",
                    start_text: "【直播间下单/直播间成交出价最大值】大于",
                    end_text: "",
                    value: 1,
                    num: "",
                },
                {
                    title: "支付roi最小值",
                    start_text: "【支付roi最小值】低于",
                    end_text: "",
                    value: 2,
                    num: "",
                },
                {
                    title: "商品购买出价最大值",
                    start_text: "【商品购买出价最大值】大于￥",
                    end_text: "",
                    value: 3,
                    num: "",
                },
                {
                    title: "放量投放中的预算最大值",
                    start_text: "【放量投放中的预算最大值】大于",
                    end_text: "",
                    value: 4,
                    num: "",
                },
                {
                    title: "7日总支付ROI",
                    start_text: "转化目标为7日总支付roi时预算最大值",
                    start_text2: "转化目标为7日总支付roi时roi最小值",
                    end_text: "",
                    value: 6,
                    num: "",
                    num2: "",
                },
                {
                    title: "直播间结算",
                    start_text: "转化目标为直播间结算时预算最大值",
                    start_text2: "转化目标为直播间结算时roi最小值",
                    end_text: "",
                    value: 8,
                    num: "",
                    num2: "",
                },
                {
                    title: "账号余额监控时段变化最大值",
                    start_text: "【账号余额监控时段变化最大值】超过",
                    end_text: "",
                    value: 5,
                    num: "",
                },
            ],
            loading: false,
            dialogVisible: false,
            addRuleGroupForm: {
                isSelect: [
                    {
                        title: "直播间下单/直播间成交出价最大值",
                        start_text: "【直播间下单/直播间成交出价最大值】大于",
                        end_text: "",
                        value: 1,
                        num: "",
                    },
                ],
            },
            addRuleGroupRules: {
                group: [
                    {
                        required: true,
                        message: "请输入",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern:
                            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                        required: true,
                        message: "请输入正确数值",
                        trigger: ["blur", "change"],
                    },
                    { validator: maxValue, trigger: ["blur", "change"] },
                ],
            },
        };
    },
    created() {},
    methods: {
        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.$emit("getRulesData", this.addRuleGroupForm.isSelect);
                    this.resetForm("addRuleGroupForm");
                } else {
                    return false;
                }
            });
        },

        // 添加条件
        selectCondition() {
            if (this.editor_uid.length == 0) {
                this.editor_uid = [1];
            }
            let arr = [];
            for (let i in this.condition) {
                for (let a in this.editor_uid) {
                    if (this.condition[i].value == this.editor_uid[a]) {
                        arr.push(this.condition[i]);
                    }
                }
            }
            for (let i in arr) {
                for (let a in this.addRuleGroupForm.isSelect) {
                    if (
                        arr[i].value == this.addRuleGroupForm.isSelect[a].value
                    ) {
                        arr[i].num = this.addRuleGroupForm.isSelect[a].num;
                    }
                }
            }
            this.addRuleGroupForm.isSelect = arr;
        },

        // 关停计划文案
        // getConditionText(value){
        //     let text =''
        //     for(let i in value){
        //         if(value[i].value !=5){
        //             text+=`${value[i].start_text}<span class="blue_tips">${value[i].num}</span>${value[i].end_text},`
        //         }
        //     }
        //     text = text+`则触发<span class="blue_tips">关停计划</span>操作`
        //     return text
        // },

        // 预警通知文案
        // getWarnText(value){
        //     let text =''
        //     for(let i in value){
        //         if(value[i].value ==5){
        //             this.is_show2 = true
        //             text+=`${value[i].start_text}<span class="blue_tips">￥${value[i].num}</span>${value[i].end_text},`
        //         }
        //     }
        //     text = text+`则触发<span class="blue_tips">预警通知</span>操作`
        //     return text
        // },

        // 删除条件
        deletCondition(item) {
            let index = this.editor_uid.findIndex((it) => {
                return it == item;
            });
            this.editor_uid.splice(index, 1);
            this.selectCondition();
        },

        isShowPlan(val) {
            let is_show = false;
            for (let i in val) {
                if (val[i].value == 5) {
                    is_show = true;
                }
            }
            return is_show;
        },

        // 关闭重置表单
        resetForm(formName) {
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.rules_title {
    flex-shrink: 0;
    margin-right: 50px;
}
.rule_box {
    max-height: 500px;
    overflow-y: auto;
}
.cod_text {
    line-height: 30px;
}
.rule_titles {
    font-size: 13px;
    color: #17233d;
    font-weight: bold;
}
.blue_tips {
    color: #4475ff;
}
.tips_text {
    color: #b4b7bd;
    font-weight: normal;
}
.condition_box {
    border: 1px solid #ebebeb;
    border-radius: 4px;
    background-color: #f8f9fb;
    margin-bottom: 12px;
}
.condition_item {
    padding: 12px 0;
    margin: 0 20px;
    border-bottom: 1px solid #ebebeb;
    position: relative;
    z-index: 2;
}
.condition_item.noBline {
    border-bottom: 0;
}
.condition_tips {
    position: relative;
    font-size: 13px;
    line-height: 16px;
    color: #616c85;
    padding: 13px 20px 13px 45px;
    background-color: #fff;
}
.condition_tips svg {
    position: absolute;
    left: 20px;
    top: 10px;
}

.cod_tag {
    flex-shrink: 0;
}

.check_style.adver_drop {
    max-height: auto;
}
.check_style.adver_drop .el-checkbox {
    width: 300px;
}
.drop_box {
    margin-top: 10px;
    color: #4475ff;
}
.cod_item {
    margin-top: 12px;
}
</style>

